<template>
    <div id="oprloss_main" class="echarsBox"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
    name: "oprloss",
    data() {
        return {};
    },
    mounted() {
        this.drawLine();
    },
    methods: {
        drawLine() {
            let chartDom = document.getElementById("oprloss_main");
            let myChart = echarts.init(chartDom);
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['本周', '上周'],
                    icon: 'circle',
                    textStyle: {
                        color: '#fff'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '6%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff',
                                fontSize: 12
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            show: false
                        },
                        data: ['产能异常', '品质异常', '产能异常', '品质异常', '产能异常'],
                        axisLabel: {
                            textStyle: {
                                color: '#fff',
                                fontSize: 10
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '上周',
                        type: 'bar',
                        barWidth: 10,
                        stack: 'Total',
                        label: {
                            show: false
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [320, 302, 341, 374, 390],
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    {
                                        offset: 0,
                                        color: 'rgba(224,32,32,0.2)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(223,32,32,1)'
                                    }
                                ])
                            }
                        }
                    },
                    {
                        name: '本周',
                        type: 'bar',
                        barWidth: 10,
                        stack: 'Total',
                        label: {
                            show: false,
                            position: 'left'
                        },

                        data: [-120, -132, -101, -134, -190],
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    {
                                        offset: 0,
                                        color: 'rgba(255,213,50,1)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(247,181,1,0.2)'
                                    }
                                ])
                            }
                        }
                    }
                ]
            };
            option && myChart.setOption(option);
            window.addEventListener('resize', myChart.resize);
        },
    },
};
</script>
<style  scoped>
.echarsBox {
    width: 100%;
    height: calc(100% - 41.5px);
    overflow: hidden;
}
</style>
            